<script setup lang="ts">
import { postOrderAPI } from '@/api/order';
import { GetSchedule, Patient, PatientList } from '@/api/type/user';
import { getPatientListAPI, getScheduleAPI } from '@/api/user';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router=useRouter()
const route=useRoute()
const activeItem=ref<Patient>()

const patientList=ref<PatientList>([])
const getList=async()=>{
  const res= await getPatientListAPI()
  patientList.value=res.data
  activeItem.value=res.data[0]
}
getList()

//获取挂号信息
const HospInfo=ref<GetSchedule>()
const getHospInfo=async()=>{
  const res=await getScheduleAPI(route.query.scheduleId as string)
  HospInfo.value=res.data
}
getHospInfo()
//跳转订单详情页
const goOrderShow=async()=>{
  const res=await postOrderAPI(
    HospInfo.value?.hoscode as string,
    route.query.scheduleId as string,
    activeItem.value?.id as number
  )
  ElMessage({
    type:'success',
    message:'创建订单成功'
  })
  router.push(`/user/order/show?orderId=${res.data}`)
}
</script>

<template>
  <div class="booking">
    <div class="title">确认挂号信息</div>
    <div class="sub_title">
      <div class="block"></div>
      选择就诊人：
    </div>
    <div class="patient">
      <div class="patient_card">
        <el-card shadow="hover" @click="activeItem=item"  :class="{active:item.id===activeItem?.id}"
        class="item_card" v-for="item in patientList" :key="item.id">
          <div class="item" >
            <div class="item_title">{{item.name}}</div>
            <div>
              <div>{{item.param.certificatesTypeString}}</div>
              <div>{{item.certificatesNo}}</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="add_card" @click="router.push('/user/patient/add')" >
        <el-card shadow="hover" body-style="width: 200px;height: 90px;">
          <div class="item_add">
            +添加就诊人
          </div>
        </el-card>
      </div>
    </div>
    <div class="sub_title">
      <div class="block"></div>
      选择就诊卡：
      <span class="card_tips">
        <svg t="1728570951884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5688" width="12" height="12"><path d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z" fill="#FF5F5F" p-id="5689"></path><path d="M512 690.677551m-31.346939 0a31.346939 31.346939 0 1 0 62.693878 0 31.346939 31.346939 0 1 0-62.693878 0Z" fill="#FF5F5F" p-id="5690"></path><path d="M512 584.097959c-11.493878 0-20.897959-9.404082-20.897959-20.897959v-261.22449c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 12.016327-9.404082 20.897959-20.897959 20.897959z" fill="#FF5F5F" p-id="5691"></path></svg>
        <span>如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span>
      </span>
    </div>
    <el-card class="card">
      <template #header>
        <div class="clearfix">
          {{ activeItem?.name }} {{ activeItem?.certificatesNo }}居民身份证
        </div>
    </template>
    <template #default>
          <div class="el-card__body">
            <div class="card_info">
              <span class="type">{{activeItem?.isInsure===1?'医保':'自费'}}</span>
            <span class="card_no">{{activeItem?.certificatesNo}}</span>
            <span class="card_view">居民身份证</span>
            </div>
            <div></div>
          </div>
        </template>
    </el-card>
    <div class="sub_title">
      <div class="block"></div>
      挂号信息：
    </div>
    <div class="content">
      <el-form label-width="auto" >
        <el-form-item style="font-size: 14px;" label="就诊日期:">{{HospInfo?.workDate}}{{ HospInfo?.param.dayOfWeek }}</el-form-item>
        <el-form-item style="font-size: 14px;" label="就诊医院:">{{ HospInfo?.param.hosname }}</el-form-item>
        <el-form-item style="font-size: 14px;" label="就诊科室:">{{HospInfo?.param.depname}}</el-form-item>
        <el-form-item style="font-size: 14px;" label="医生姓名:">{{HospInfo?.docname}}</el-form-item>
        <el-form-item style="font-size: 14px;" label="医生职称:">{{HospInfo?.title}}</el-form-item>
        <el-form-item style="font-size: 14px;" label="医生专长:">{{HospInfo?.skill}}</el-form-item>
        <el-form-item style="color: #4490F1;font-weight: 700;font-size: 14px;" label="医事服务费:">
          {{HospInfo?.amount}}元</el-form-item>
      </el-form>
    </div>
    <el-row type="flex" justify="center" align="middle">
      <el-col :span="12">
        <el-button :disabled="!activeItem" @click="goOrderShow" style="width: 140px;height: 44px;" type="primary">确认挂号</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.booking {
  .title {
    margin: 30px 20px 0 0;
    font-weight: 700;
    color: #333;
  }
  .sub_title {
    display: flex;
    align-items: center;
    margin-top: 60px;
    color: #999;
    font-size: 14px;
    .block {
      width: 4px;
      height: 14px;
      margin-right: 6px;
      background-color: #4490F1;
      border-radius: 2px;
    }
    .card_tips {
      display: flex;
      align-items: center;
      padding-left: 10px;
      color: #ff5f5f;
      font-size: 12px;
      svg {
        margin-right: 3px;
      }
    }
  }
  .patient {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    .patient_card {
      display: flex;
      cursor: pointer;
      .item_card {
        width: 200px;
        &.active {
          background-color: #4990F1;
          font-weight: 700;
         .item {
          .item_title {
            color: #fff;
          }
          color: #fff;
         }

        }
      }
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #999;
        font-size: 12px;
        .item_title {
          margin-bottom: 10px;
          font-size: 14px;
          color: #333;
        }
       .item_title:hover {
        font-weight: 700;
       }
      }
    }
    .add_card {
      margin-left: 32px;
      display: flex;
      cursor: pointer;
      .item_add{
        color: #4490F1;
        text-align: center;
        line-height: 45px;
      }
    }
  }
  .card {
    padding:0 30px;
    margin-top:30px;
    cursor: pointer;
    .el-card__body {
        display: flex;
        justify-content: space-between;
        padding: 0;
        .card_info {
          background-color: #89C4ED;
          height: 50px;
          padding: 0 14px;
          margin-right: 50px;
          display: flex;
          align-items: center;
          border-radius: 10px;
          justify-content: space-between;
          .type {
            color: #89C4ED;
            background-color: #fff;
            border-radius: 3px;
            margin-right: 10px;
            padding: 4px;
            font-size:12px ;
          }
          .card_no {
            color: #fff;
            margin-right: 10px;
          }
          .card_view {
            color: #fff;
            margin-right: 10px;
          }
        }
      
      }
  }
  .content {
    margin: 20px 0 0 140px;
    padding-bottom: 30px;
  }
}
</style>